<template>
  <div id="detail">
    <NavBar class="nav-bar">
      <div slot="item-left" class="left" @click="back()">
        <img src="/img/common/back.svg" alt="">
      </div>
      <div slot="item-center" class="center">
        <div class="center-item" v-for="item,index in  ['商品','参数','评论','推荐']"  :key="index" @click="NavBarItemClick(index)"  :class="{active: index === currentIndex}" >{{item}}</div>
      </div>
    </NavBar>
    <Scroll class="content"
            ref="Scroll"
            :probe-type="3"
            :pull-up-load="true"
            @scrollPosition="scrollPosition"
    >
      <DetailSwiper :banner="detailData.banners"  @swiperImgLoad="swiperImgLoad" />
      <GoodInfo  :goodsInfo="goods"/>
      <ShopInfo class="shop-info" :shopInfo="ShopInfoData" />
      <Imgs ref="Img" :imgs="imgs" @ImgLoad="ImgLoad"/>
      <DetailComment   :CommentData="CommentData"   ref="DetailComment" />
      <div class="removed"></div>
      <goods  ref="recommend" :goods="recommendData[goodType].list"     />
    </Scroll>
    <BottomBar @addCart="addCart()" />

    <BackTop @click.native="backTop()" v-show="IsShow"    />

  </div>
</template>

<script>
    import NavBar from "../../components/common/navbar/NavBar";
    import DetailSwiper from "./childComp/DetailSwiper";
    import Scroll from "../../components/common/scroll/Scroll";
    import GoodInfo from "./childComp/GoodInfo";
    import ShopInfo from "./childComp/ShopInfo"
    import Imgs from "./childComp/Imgs";
    import DetailComment from "./childComp/DetailComment";
    import Goods from "../../components/content/goods/Goods";
    import BottomBar from "./childComp/BottomBar";

    import {detailData,GoodsInfo,ShopInfoData,CommentData} from "../../network/detail";
    import {getGoods} from "../../network/home";
    import {debounce} from "../../common/utils";
    import {BackTopMixIn} from "../../common/mixin";



    export default {
        name: "Detail",
        components:{
            NavBar,
            DetailSwiper,
            Scroll,
            GoodInfo,
            Imgs,
            ShopInfo,
            DetailComment,
            Goods,
            BottomBar,
        },
        mixins:[BackTopMixIn],
        data(){
            return{
                pid:0,
                currentIndex:0,
                detailData:{},
                goods:{},
                ShopInfoData:{},
                imgs:[
                    '/img/home/goods/goods1.jpg',
                    '/img/home/goods/goods2.jpg',
                    '/img/home/goods/goods3.jpg',
                    '/img/home/goods/goods4.jpg',
                    '/img/home/goods/goods5.jpg',
                ],
                CommentData:{},
                recommendData:{
                    'pop':{page:0,list:[]},
                },
                goodType:'pop',
                itemImgListener:null,
                ItemBarHeight:[],
            }
        },
        mounted(){
            //图片加载完重载scroll
            const reload = debounce(this.$refs.Scroll.refresh,50)
            this.itemImgListener = ()=>{
                reload()
            }
            this.$bus.$on('DetailCommentImgLoad',this.itemImgListener)
            this.$bus.$on('GoodsImgLoad',this.itemImgListener)
            this.getRecommendGoods('pop')

        },
        destroyed(){
            this.$bus.$off('GoodsImgLoad',this.itemImgListener)
        },
        created(){
            this.pid = this.$route.params.id
            //请求数据
            this.detailData =  detailData(this.pid)
            this.goods = new GoodsInfo(this.detailData)
            this.ShopInfoData = new ShopInfoData()
            this.CommentData = new CommentData(this.pid)
        },
        methods:{
            back(){
                this.$router.back()
            },
            NavBarItemClick(index){
                // console.log("点击导航");
                this.currentIndex = index
                this.$refs.Scroll.scrollTo(0,-(this.ItemBarHeight[index]),100)
            },
            swiperImgLoad(){
                this.heightRefresh()
            },
            //滑动位置
            scrollPosition(position){
                this.IsShow = -(position.y)>500 ? true : false
                const positionY = position.y
                //滚动时判断位置
                for(let i=0;i<this.ItemBarHeight.length;i++) {
                    if (-(positionY) >= this.ItemBarHeight[i] &&  -(positionY) < this.ItemBarHeight[i+1]) {
                        this.currentIndex = i
                    }
                }
            },
            ImgLoad(){
                this.heightRefresh();
                this.getItemY()
            },

            // 处理图片加载刷新的方法
            heightRefresh(){
                debounce(this.$refs.Scroll.refresh,100)
            },
            getItemY(){
                // debounce(()=>{
                    this.ItemBarHeight = []
                    this.ItemBarHeight.push(0)
                    this.ItemBarHeight.push(this.$refs.Img.$el.offsetTop)
                    this.ItemBarHeight.push(this.$refs.DetailComment.$el.offsetTop)
                    this.ItemBarHeight.push(this.$refs.recommend.$el.offsetTop)
                    this.ItemBarHeight.push(Number.MAX_VALUE)
                    // console.log(this.ItemBarHeight);
                // },50)
            },
            getRecommendGoods(type){
                this.recommendData[type].list.push(...getGoods(type,this.recommendData[type].page += 1))
            },
            addCart(){
                const goodInfo = {}
                goodInfo.pid =  this.pid
                goodInfo.img =  this.detailData.banners[0]
                goodInfo.title = this.goods.title
                goodInfo.desc = this.goods.desc
                goodInfo.price = this.goods.realPrice
                this.$store.dispatch('addCart',goodInfo).then((res)=>{
                    this.$toast.show('加入购物车成功')
                })

            }
        }
    }
</script>

<style scoped>

  #detail{
    height: 100vh;
    position: relative;
    z-index: 1;
    background-color: white;
  }
  .shop-info{
    margin-bottom: 20px;
  }
  .nav-bar {
    position: relative;
    top:0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: white;
  }
  .center{
    display: flex;
  }
  .center-item{
    flex: 1;
  }
  .left img{
    margin-top: 10px;
  }
  .active{
    color: var(--color-high-text)
  }
  .content{
    height: calc(100% - 44px - 49px);
    /*position: absolute;*/
    /*top: 44px;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
  }
  .removed{
    box-shadow: 0 -5px 0px rgba(100, 100, 100, 0.1);
    width: 100%;
    height: 5px;
  }
</style>
